.home-page {
	width: 100vw;
	height: 100vh;
	background-image: url('../../assets/imgs/bg.png');

	.home-bs {
		box-shadow: 0px 4px 4px 0px rgba(48, 90, 218, 0.06);
	}

	.chart-item-content {
		.chat-item {
			&.assistant {
				.chat-content-wrap {
					.chat-content {
						max-width: 90%;
					}
				}
			}

			.chat-content {
				margin: 0 8px;
				font-size: 12px;

				p {
					font-size: 12px;
				}
			}
		}
	}

	.chart-item-content {
		display: flex;
		flex-direction: column;
	}

	.chat-item {
		display: flex;
		width: auto;
		margin: 16px 0;

		.chart-img {
			height: 36px;
			width: 36px;
			border-radius: 50%;
			background-size: cover;
		}

		.chat-content-wrap {
			width: 100%;
			display: flex;
		}

		.chat-content {
			background: #ffffff;
			box-shadow: 0px 8px 24px 8px rgba(0, 0, 0, 0.08);
			border-radius: 8px;
			min-height: 32px;
			// flex: 1;
			color: #86909c;
			padding: 16px;
			margin: 0 24px;
		}

		&.assistant {
			text-align: left;

			.chart-img {
				background-image: url('./images/logo.png');
			}
		}

		&.system {
			text-align: left;

			.chart-img {
				background-image: url('./images/logo.png');
			}
		}

		&.user {
			.chat-content-wrap {
				justify-content: flex-end;
			}

			// margin-left: 40%;
			text-align: right;
			flex-direction: row-reverse;

			.chart-img {
				background-image: url('./images/user.png');
			}
		}
	}
}

// 音频播放器样式
.audio-player {
	margin-top: 20px;
	padding: 15px;
	background-color: #f8f8f8;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

	h4 {
		margin-bottom: 10px;
		color: #333;
	}

	audio {
		width: 100%;
		max-width: 100%;
		height: 40px;
		border: none;
		outline: none;
	}
}
